<style>
    .padding-content {
        top: 6em;
        padding-left: 0;
        padding-right: 0;
    }
    
    .summary-footer {
        height: 3.5em;
        border-top: 1px solid #ddd;
    }
    
    .has_footer {
        bottom: 3.5em;
    }
    
    ion-content>div {
        height: 100%;
    }
    
    .food-item {
        width: 100%;
        float: left;
        clear: both;
        margin-bottom: -.5em;
    }
    
    .food-item-left {
        width: 20%;
        float: left;
        clear: left;
    }
    
    .food-item-left img {
        width: 100%;
        display: block;
    }
    
    .food-item-right {
        width: 90%;
        /*        float: right;*/
        clear: right;
    }
    
    .text {
        width: 100%;
        float: left;
        text-align: left;
    }
    
    .summary-left {
        margin-left: 1.5em;
        width: 70%;
        float: left;
        /*        line-height: 32px;*/
        text-align: left;
        font-size: 20px;
    }
    
    .summary-right {
        float: right;
        width: 20%;
    }
    
    .btn-change {
        min-width: 1.5em;
        min-height: 1.5em;
        line-height: normal;
    }
    
    .box {
        width: 100%;
        height: 160px;
    }
    
    div > img {
        width: 90%;
        height: 96%;
    }
    
    .cart-css {
        width: 1.8em;
        height: 1.4em;
        font-size: 380%;
        margin-top: -0.6em;
        margin-left: 0.2em;
        border-radius: 3em;
        background-color: #29b6f6;
        padding-top: .2em;
        padding-right: .1em;
        color: #ffffff;
    }
</style>


<ion-view ng-controller="ReserveShopCtrl">
    <ion-content class="padding-content has_footer" style="overflow: hidden;">
        <ion-scroll zooming="true" scrollbar-y="false" direction="y" style="float: left;width: 30%; height: 100%;background-color:#dddddd;overflow: hidden;">
            <ion-list>
                <ion-item ng-repeat="item in goods_list" ng-click="choose_menu(item.id,$index)" style="{{chooseLeftStyle[$index]}} height:5em;border-bottom:2px solid #bbb;">
                    <span style="font-size:150%;line-height:2.1em;"> {{item.name}}</span>
                </ion-item>
            </ion-list>
        </ion-scroll>



        <ion-scroll ng-repeat="menu_item in goods_list" ng-show="start_menu == menu_item.id" zooming="true" scrollbar-y="false" direction="y" style="float: left;width: 70%; height: 100%; background: #fff;overflow: hidden;">

            <ion-list>
                <ion-item ng-repeat="item in menu_item.foodList">
                    <div class="food-item">
                        <div>
                            <img src="{{IMAGE_IP}}/api{{item.picture1}}" />
                        </div>
                        <div class="food-item-right" style="margin-left:1em;">
                            <span style="float:left;font-size:150%;padding-top:.3em;padding-bottom:.3em;margin-left: -.5em;">{{item.name}}</span>
                            <br />
                            <br />


                            <table style="text-align:center;width:46%;height:1.5em;border-collapse:collapse;border:1px solid #999;float:left;margin-left: -.7em;">
                                <tr>
                                    <td ng-click="minus_goods_fun(item.id,item)" style="width:29%;font-size:2.5em;border:1px solid #999;line-height:1.1em;">-</td>
                                    <!--
                                    <td ng-if="!add_goods[item.id]" style="font-size:1.5em;line-height:1.1em;">
                                        <input style="width: 2em;font-size: 1em;line-height: 1.1em;    padding-left: .2em;" id="blur_input{{item.id}}" ng-blur="blur(item.id,item,$event)" type="text" ng-model="defaultNum">
                                    </td>
-->
                                    <td ng-blur="blur(item.id,item,$event)" style="font-size:1.5em;line-height:1.1em;">
                                        <input style="width: 2em;font-size: 1em;text-align:center;line-height: 1.1em;    padding-left: .2em;" id="blur_input{{item.id}}" ng-blur="blur(item.id,item,$event)" type="tel" ng-model="add_goods[item.id]['add_num']" value="0">
                                    </td>
                                    <td ng-click="add_goods_fun(item.id,item,$event)" style="width:29%;font-size:2em;border:1px solid #999;line-height:1.1em;">+</td>
                                </tr>
                            </table>
                            <!--
                            <table style="text-align:center;width:46%;height:1.5em;border-collapse:collapse;border:1px solid #999;float:left;margin-left: -.7em;">
                                <tr>
                                    <td ng-click="minus_goods_fun(item.id,item)" style="width:29%;font-size:2.5em;border:1px solid #999;line-height:1.1em;">-</td>
                                    <td ng-if="!add_goods[item.id]" id="blur_input{{item.id}}" style="font-size:1.5em;line-height:1.1em;" contenteditable="true" ng-blur="blur(item.id,item,$event)" ng-click="changeFocus(item.id,$event)">0</td>
                                    <td ng-if="add_goods[item.id]" id="blur_input{{item.id}}" style="font-size:1.5em;line-height:1.1em;" contenteditable="true" ng-blur="blur(item.id,item,$event)" ng-focus="changeFocus(item.id,$event)">{{add_goods[item.id]['add_num']}}</td>
                                    <td ng-click="add_goods_fun(item.id,item,$event)" style="width:29%;font-size:2em;border:1px solid #999;line-height:1.1em;">+</td>
                                </tr>
                            </table>
-->

                            <span style="float:right;font-size:220%;color:#ffaa33;line-height:1em;     font-family: Arial, Helvetica, sans-serif;  "><span style=" font-family:Times New Roman,Windings">￥</span>{{item.goodsPrice}}</span>
                        </div>
                    </div>
                </ion-item>
            </ion-list>
        </ion-scroll>
    </ion-content>

    <div class="bar bar-footer" style="border-top: 1px solid #dddddd;height:4em;" id="end">

        <span class="summary-left" style="height:100%;"><div style="padding-top:.2em;height:60%;"><span style=" font-family:Times New Roman,Windings;font-size:160%;">￥</span><span style="font-family: Arial, Helvetica, sans-serif;font-size:160%;">{{goods_sum}}</span></div>
    <br/>
    <div style="margin-top:-0.8em;font-size:90%;height:40%;"><span>货品数量 ： {{goods_num}}</span></div>
    </span>
    <!--
    <button class="button button-balanced summary-right" style="font-size:150%;width:7em;background-color:#29b6f6;margin: -.2em;" ng-click="sub_goods()">
    提交订单
</button>
-->

    <button class="button button-balanced summary-right" style="font-size:150%;width:7em;background-color:#29b6f6;margin: -.25em;" ng-click="sub_goods()">
        提交订单
    </button>
    </div>


</ion-view>